<template>
  <!-- Home Nav Top Bar -->
  <div class="hs-nav-bar">
    <div class="hs-nav-container">
      <i class="fa fa-bars" style="font-size: 20px;" @click="toggleSideBar"> </i>
      <div class="hs-nav-title" >
        <img  src="static/img/favicon.ico" />
        <span>Jupiter 后台管理系统</span>
      </div>

      <levelbar> </levelbar>
      <!--<tabs-view></tabs-view>-->
    </div>
    <div class="avatar-container">

      <el-popover
        placement="bottom-end"
        width="90"
        trigger="hover"
        v-model="popUser" >
        <div style="text-align: center">
          <div style="border-bottom: 1px solid #efefef;padding-bottom: 6px; margin-bottom:4px; "> {{user.username}} </div>
          <el-button type="text" @click="handleUser">用户信息</el-button><br/><el-button type="text" @click="toggleTheme">切换主题</el-button>
        </div>
        <img class="user-avatar" :src="'static/img/avatar/' + user.avatar" slot="reference">
      </el-popover>

      <el-tooltip effect="dark" content="通知" placement="bottom">
        <i class="fa fa-bell fa-lg" @click="handleAlarm"/>
      </el-tooltip>
      <el-tooltip effect="dark" content="退出" placement="bottom">
        <i class="fa fa-sign-out fa-lg" @click="handleLogout"/>
      </el-tooltip>

    </div>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Levelbar from './Levelbar'

export default {
  components: {
    Levelbar
  },
  data () {
    return {
      popUser: false
    }
  },
  computed: {
    ...mapGetters({
      user: 'getUser'
    })
  },
  methods: {
    ...mapActions([
      'CHANGE_COLLAPSE_STATE', 'USER_LOGOUT', 'CHANGE_THEME_STATE', 'DEL_LOGIN_TOKEN'
    ]),
    toggleSideBar () {
      this.CHANGE_COLLAPSE_STATE()
      this.popUser = false
    },
    toggleTheme () {
      this.CHANGE_THEME_STATE()
      this.popUser = false
    },
    handleLogout () {
      let title = this.user.username + ', 您确认退出吗?'
      this.$confirm(title, '提示', { type: 'warning' }).then(() => {
        this.USER_LOGOUT().then(() => {
          this.$router.push('/login')
        }).catch(() => {
          // console.log('user logout error')
          // location.reload() // 为了重新实例化vue-router对象 避免bug
        })
        this.DEL_LOGIN_TOKEN()
        location.reload()
      })
    },
    handleAlarm () {
    },
    handleUser () {
      this.$router.push('/user')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-tooltip {
    margin-left: 10px;
  }
  .hs-nav-bar {
    i {
      cursor: pointer;
    }
    .avatar-container {
      .user-avatar {
        float:left;
        width: 36px;
        height: 36px;
        margin: 12px 10px;
        border-radius: 18px;
      }
    }
  }
</style>
